How To Simultaneously Add Multiple Products To A Magento Shopping Cart

This post is a bit over­due con­sid­er­ing the project for which I did this was com­pleted months ago. I finally got around to doc­u­ment­ing it. Magento’s prod­uct list view lets cus­tomers add prod­ucts to the shop­ping cart one at a time. The client wanted cus­tomers to be able to add mul­ti­ple prod­ucts to the shop­ping cart simul­ta­ne­ously. Given the time con­straints for the projects, I cre­ated an ad hoc AJAX method to accom­plish this fea­ture request.

Adding a prod­uct to a Magento (ver. 1.3.1) shop­ping cart is accom­plished through an HTTP GET request. It will look like or sim­i­lar to this:

/path/to/app/checkout/cart/add?product=[id]&qty=[qty]

That URL is out­put by the tem­plate helper:

$this->getAddToCartUrl($_product)

Since adding a prod­uct to the shop­ping cart is noth­ing more than a GET request, then all that needs to be done is queue up the URLs of the desired prod­ucts, make each request in order, and then reload the page when done.

First, in app/design/frontend/ / /template/catalog/product/list.html, I first added check­boxes to allow cus­tomers to select which prod­ucts they want and also hid­den fields for stor­ing the URLs to add the prod­uct and text fields for the quantity. 

     isGrouped()): ?>     
     

I added this code within the loop that gen­er­ate the HTML for the prod­uct line items for the list. Next, I added the JavaScript that does the actual pro­cess­ing, also within the list sec­tion right after the script block that con­tains: decorateList('products-list', 'none-recursive') .

At the bot­tom of the list I added a sub­mit button.

     
      
        __('Add Items to Cart') ?>
      
       Processing... 
       
      
     

Click­ing the but­ton calls the func­tion addItemsToCart() . The func­tion hides the but­ton to pre­vent a dou­ble click and unhides the sta­tus mes­sage. Next, the func­tion deter­mines which check­boxes are checked. For each checked check­box, the func­tion finds the cor­re­spond­ing URL field and quan­tity field, con­cate­nates the two val­ues, and stores the new URL in an array. If the length of the array is greater than 0, then the func­tion calls processNext() , oth­er­wise it dis­plays an error mes­sage and resets the sub­mit button.

The func­tion processNext() first updates the pro­cess­ing mes­sage. The func­tion takes the array of URLs and an index, and then cre­ates an AJAX GET request using the URL at the given index in the array. If the AJAX request com­pletes, it calls process­Next() with the same array but with an incre­mented index while the index is less than the array length. If the incre­mented index is greater than the array length, then that ends the pro­cess­ing and the func­tion reloads the page.

That’s it. If there is any­thing wrong with the code, it assumes that all the GET requests will com­plete. Unfor­tu­nately, given the time con­straints there was no time to account for the sce­nario where a GET request fails.